<template>
  <div class="food-information">
    <div class="box-card">
      <div class="box-title">菜品管理</div>
    </div>

    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分类管理" name="classifi">
          <classi-fiction :shop-id="shopId" />
        </el-tab-pane>
        <el-tab-pane label="菜品资料" name="info">
          <info-bar :shop-id="shopId" />
        </el-tab-pane>
        <el-tab-pane label="菜品属性" name="second">
          <menu-attr :shop-id="shopId" />
        </el-tab-pane>
        <!-- <el-tab-pane label="店铺设置" name="store">
          <store-settings :shop-id="shopId"/>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
<script>
import InfoBar from './components/InfoBar'
import menuAttr from './components/menuAttribute'
import classiFiction from '../classification-management/index'
// import storeSettings from '../store-settings/index'
export default {
  components: {
    classiFiction: classiFiction,
    InfoBar: InfoBar,
    menuAttr: menuAttr
    // storeSettings: storeSettings
  },
  data() {
    return {
      activeName: 'classifi',
      shopId: 0
    }
  },
  created() {
    this.shopId = this.$route.params.id
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      this.shopId = this.$route.params.id
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  padding: 24px 30px;
      border-radius: 5px 5px 0 0;
      background-color: #fff;
    .box-title {
     font-size: 20px;
        color: $dark-font-color;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
  /* reset element*/
  .food-information {
    .el-tabs__header {
      padding-left: 30px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }
</style>

